<template>
<div class="good-recommend">
    <div class="goods-top-menu">
        <div class="goods-menu-left">
            <div class="all-check"><el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox></div>
            <div class="client-view">
                <el-select v-model="is_house" placeholder="套餐类型" @change="init(1)">
                    <el-option v-for="item in typeList" :key="item.type_id" :label="item.type_name" :value="item.type_id"></el-option>
                </el-select>
            </div>

            <div class="client-view">
                <el-select v-model="style_id" placeholder="风格分类" @change="init(1)">
                    <el-option v-for="item in styleList" :key="item.style_id" :label="item.style_name" :value="item.style_id"></el-option>
                </el-select>
            </div>
            <div class="client-view">
                <el-select v-model="space_id" placeholder="空间" @change="init(1)">
                    <el-option v-for="item in spaceList" :key="item.space_id" :label="item.space_name" :value="item.space_id"></el-option>
                </el-select>
            </div>
            <div class="client-view">
               <el-select v-model="level_id" placeholder="套餐价格" @change="init(1)">
                    <el-option v-for="item in levelList" :key="item.level_id" :label="item.label_name" :value="item.level_id"></el-option>
                </el-select>
            </div>
        </div>

        <div class="goods-menu-right">
           <refresh-button @refresh="refreshPage"></refresh-button>
            <div class="goods-search-view">
                <el-input :placeholder="selectText" v-model="selectContent" class="input-with-select" clearable
                    @keyup.enter.native="init(1)" @clear="refreshPage">
                    <el-select v-model="classSelect" slot="prepend" placeholder="请选择" @change="searchSelect">
                        <el-option label="套餐ID" value="1"></el-option>
                        <el-option label="套餐编码" value="2"></el-option>
                        <el-option label="套餐名称" value="3"></el-option>
                    </el-select>
                    <el-button slot="append" icon="el-icon-search" @click="init(1)"></el-button>
                </el-input>
            </div>
        </div>
    </div>
    <div class="goods-list">
        <div class="goods-item" v-for="(item, index) in goodsList" :key="index" >
            <div class="goods-checkbox"><el-checkbox v-model="item.checkbox" @change="onChange(item)"></el-checkbox></div>
            <div class="goods-content" @click="checkboxClick(item)">
                <ImgPopover style="margin-top: 5px;" :src="item.image_middle"></ImgPopover>
                <div class="text-info">
                    <el-tooltip placement="top" effect="light" :content="item.group_name">
                        <p class="goods-name">{{ item.group_name }}</p>
                    </el-tooltip>
                    <el-tooltip placement="top" effect="light" :content="item.group_sn">
                        <p class="goods-sn">商品编号：{{ item.group_sn }}</p>
                    </el-tooltip>
                    <p class="add-time">类型：{{item.is_house==1?'N98':'全屋'}}</p>
                    <div class="text-bottom">
                        <p style="color: red;">¥{{ item.retail_price }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="pages"><el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination></div>
    <div style="padding: 20px 10px;">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="addFabricClick">确 定</el-button>
    </div>
</div>
</template>

<script>
	import ImgPopover from '@/components/ImgPopover';
	export default {
		name: 'package_list',
		components: {
			ImgPopover
		},
        props: {
            layerid: {
                type: String,
                default: ''
            },
			recommend_group:{
				type:String,
				default:""
			}
        },
		data() {
			return {
				qrQialog: false,
				qrCodeUrl: '',
				goodsListType: 0,
				admin_id: localStorage.getItem('admin_id'),
				selectContent: '', // 分类搜索平输入框的值
				selectText: '请输入套餐ID', // 搜索框提示
				classSelect: '1', // 分类搜索
				goodsList: [], // 商品列表
				total: 0,
				totalData: 0, // 数据总数
				style_id: '', // 风格
				space_id: '', // 空间
				is_house: '', // 类型
				is_sale: '1', // 上下架
				level_id:'',//价格
				page: 0,
				typeList: [{
						type_id: 0,
						type_name: '全部类型'
					},
					{
						type_id: 1,
						type_name: 'N98'
					},
					{
						type_id: 2,
						type_name: '全屋'
					}
				],
				styleList: [],
				spaceList: [],
				multipleSelection: [],
				levelList:[],
                selectGoodsList:[],
                checkAll:false
			};
		},
		methods: {
			// 初始化列表
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 15,
					style_id: this.style_id,
					space_id: this.space_id,
					is_house: this.is_house,
					order_by: 'sort',
					is_sale: this.is_sale,
					level_id:this.level_id
				};

				if (this.style_id == 0) {
					delete data.style_id;
				}
				if (this.space_id == 0) {
					delete data.space_id;
				}
				if (this.is_house == 0) {
					delete data.is_house;
				}

				if (this.classSelect == 1) {
					data.group_id = this.selectContent;
				} else if (this.classSelect == 2) {
					data.group_sn = this.selectContent;
				} else if (this.classSelect == 3) {
					data.keyword = this.selectContent;
				}
				this.onCountCheck();
				this.$http(this.$ptApiList.GroupList, data).then(res => {
					this.goodsList = res.datas.list.map(item=>{
						this.$set(item,'checkbox',false)
						return item;
					})
					let checkboxNums = 0;
					this.goodsList.forEach((item,index)=>{
						this.selectGoodsList.forEach(data=>{
							if(data == item.group_id){
								checkboxNums ++
								this.$set(this.goodsList[index],'checkbox',true);
							}
						})
					})
					this.total = res.datas.count;
					if(checkboxNums === 15){
						this.checkAll = true;
					}
				});
			},
			searchSelect(e) {
				this.selectContent = '';
				if (this.classSelect == 1) {
					this.selectText = '请输入套餐ID';
				} else if (this.classSelect == 2) {
					this.selectText = '请输入套餐编码';
				} else if (this.classSelect == 3) {
					this.selectText = '请输入套餐名称';
				}
			},
			refreshPage() {
                this.checkAll = false;
				this.init()
			},
			getClass() {
				this.$http(this.$ptApiList.StyleList, {
					limit: 100
				}).then(res => {
					this.styleList = res.datas
					this.styleList.unshift({
						style_id: 0,
						style_name: '全部风格'
					})
				})

				this.$http(this.$ptApiList.SpaceList, {
					limit: 100
				}).then(res => {
					this.spaceList = res.datas
					this.spaceList.unshift({
						space_id: 0,
						space_name: '全部空间'
					})
				})
				this.$http(this.$ApiList.GroupLabel,{
					limit:100
				}).then(res=>{
					this.levelList = res.datas;
					this.levelList.unshift({
						label_name:"全部套餐",
						level_id:''
					})
				})
			},
            cancel(){
                this.$layer.close(this.layerid);
            },
            addFabricClick() {
				this.onPushItem();
                if (this.selectGoodsList.length == 0) {
                    this.$layer.msg('至少选择一件商品');
                    return;
                }
                this.checkAll = false;
				this.onSetChange();
                this.$parent.setRecommendGroup(this.selectGoodsList.join(','));
                this.$layer.msg('选择成功');
                this.cancel();
            },
            checkboxClick(item){
                if(item.checkbox){
                    item.checkbox = false
                }else{
                    item.checkbox = true
                }
            },
            handleCheckAllChange() {
				this.onSetChange();
                if (this.checkAll) {
                    this.goodsList.forEach(item => {
                        item.checkbox = true;
                    });
                } else {
                    this.goodsList.forEach(item => {
                        item.checkbox = false;
						this.selectGoodsList.forEach((data,index)=>{
							if(data == item.group_id){
								this.selectGoodsList.splice(index,1)
							}
						})
                    });
                }
            },
			// 去除重复的产品
			onCountCheck(){
				this.onPushItem();
				this.onSetChange();
			},
			onPushItem(){
				this.goodsList.forEach(item => {
                    if (item.checkbox) {
                        this.selectGoodsList.push(String(item.group_id));
                    }
                });
			},
			onChange(item){
				this.selectGoodsList.forEach((data,index)=>{
					if(data == item.group_id){
						this.selectGoodsList.splice(index,1);
					}
				})
			},
			// 去除重复
			onSetChange(){
				if(this.selectGoodsList.length){
					this.selectGoodsList = Array.from(new Set(this.selectGoodsList));
				}
			}
		},
		created() {
			if(this.recommend_group){
				this.selectGoodsList = this.recommend_group.split(',');
				this.init();
			}else{
				this.init();
			}
			this.getClass();
			
		}
	};
</script>
<style lang="scss" scoped>
.good-recommend {
    width: 100%;
	padding: 20px 20px;
	.goods-top-menu {
		display: flex;
		.goods-menu-left {
			flex: 1;
			display: flex;
		}
		.goods-menu-right {
			flex: 2;
			display: flex;
			display: flex;
			flex-direction: row-reverse;
		}
		.all-check {
			margin-right: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.client-view {
			margin-right: 10px;
			width: 120px;
		}
	}
	.pages {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.goods-list {
		padding: 10px 0;
		display: flex;
		flex-wrap: wrap;
		.goods-checkbox {
			margin-right: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
		}
		.goods-item {
				padding: 15px 10px;
				margin-top: 10px;
				margin-right: 10px;
				display: flex;
				width: 358px;
				height: 140px;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				border-radius: 4px;
				cursor: pointer;
				box-sizing: border-box;
				.goods-content {
					display: flex;
					.img-popover img {
						width: 100px !important;
						height: 100px !important;
					}
				}
		}
		.text-info {
			width: 210px;
			margin-left: 10px;
			.goods-name,
			.goods-sn {
				line-height: 30px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.add-time{
				line-height: 30px;
			}
		}
		.text-bottom {
			display: flex;
			line-height: 30px;
		}
		.text-bottom p {
			flex: 1;
		}
	}
}
</style>
